<template>
  <div>
    <van-nav-bar title="登录" class="page-nav-bar">
      <template #left>
        <van-icon name="cross" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="loginFormRef">
      <van-field
        name="手机号"
        v-model="user.mobile"
        placeholder="请输入手机号"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <!-- <template slot="left-icon"></template> -->
        <!-- <template v-slot:"left-icon"></template> -->
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field
        name="验证码"
        v-model="user.code"
        placeholder="请填写验证码"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <template #button>
          <van-count-down
            :time="5 * 1000"
            format="ss s"
            v-if="isCountShow"
            @finish="isCountShow = false"
          />
          <van-button
            v-else
            size="small"
            round
            class="send-sms-btn"
            native-type="button"
            @click="onSendSms"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit" class="login-btn"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { login, sendSms } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'LoginPage',
  props: [],
  components: {},
  data () {
    return {
      user: {
        mobile: '15982152898',
        code: '246810'
      },
      userFormRules: {
        mobile: [
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }
        ],
        code: [
          { required: true, message: '请输入验证码' },
          { pattern: /^\d{6}$/, message: '请输入正确验证码' }
        ]
      },
      isCountShow: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    ...mapMutations(['setToken', 'setUser']),
    async onSendSms () {
      try {
        const res = await login(this.user)
        // 直接提交
        // this.$store.commit('setToken',res.data.data.token)
        // 通过mapstate
        // this.$store.commit('setToken', res.data.data.token)
        this.setUser(res.data.data)
        // 校验手机号
        await this.$refs.loginFormRef.validate('手机号')
        // 发送请求
        this.isCountShow = true
        await sendSms(this.user.mobile)
        console.log('发送成功')
      } catch (e) {
        if (e.response) {
          // 后端发来的错误
          if (e.response.status === 429) {
            this.$toast.fail('发送频繁')
          } else {
            this.$toast.fail('请稍后重试')
          }
        } else {
          console.log('校验失败')
        }
        this.isCountShow = false
      }
    },
    async onSubmit (values) {
      // 提示加载中
      this.$toast.loading({
        message: '加载中',
        forbidClick: true,
        duration: 0
      })
      // 发请求
      try {
        const res = await login(this.user)
        this.setUser(res.data.data)
        this.$toast.success('登录成功')
        console.log('登陆成功')
      } catch (error) {
        console.dir(error)
        if (error.response.status === 400) {
          this.$toast.fail('手机号或者验证码错误')
        } else {
          this.$todoast.fail('请稍后再试')
        }
        // console.log('登录失败', error)
      }
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
.toutiao {
  font-style: 37px;
}
.send-sms-btn {
  width: 162px;
  height: 46px;
  background-color: #ededed;
  color: #666;
  font-style: 22px;
  line-height: 46px;
}
.login-btn-wrap {
  padding: 53px 53px;
}
.login-btn {
  background-color: #6db4fb;
  border: none;
}
</style>
